<template>
  <view class="withdrawal-page">
    <!-- 顶部导航栏 -->
    <view class="header">
		<view class="back-btn" @click="backPage()">
			<view class="back-icon"></view>
		</view>
		<view class="title">申请提现</view>
		<view class="menu-icons">
			<text class="dots">•••</text>
			<text class="circle">◉</text>
		</view>
    </view>
    
    <!-- 账户余额卡片 -->
    <view class="card">
      <view class="balance-row">
        <text class="balance-label">账户余额</text>
        <text class="balance-amount">¥ {{ balance }}</text>
      </view>
      
      <!-- 提现表单 -->
      <view class="form-group">
        <text class="form-label">提现金额</text>
        <input class="form-input" type="text" placeholder="" v-model="table.cashWithdrawal" />
        <text class="currency-unit">元</text>
      </view>
      
      <view class="form-group">
        <text class="form-label">真实姓名</text>
        <input class="form-input" type="text" placeholder="" v-model="table.realName" />
      </view>
      
      <view class="form-group">
        <text class="form-label">请输入银行</text>
        <input class="form-input" type="text" placeholder="" v-model="table.backName" />
      </view>
      
      <view class="form-group">
        <text class="form-label">请输入银行卡号</text>
        <input class="form-input card-input" type="text" placeholder="" v-model="table.bankCardNumber" />
      </view>
      
      <view class="disclaimer">
        <text>车联网服务平台不会通过任何渠道泄露您的个人信息，请放心填写</text>
      </view>
      
      <button @click="submitd()" class="submit-btn"><text>确认信息并提交</text></button>
    </view>
    
    <!-- 提现记录 -->
    <view class="history-section">
      <view class="history-title">
        <text>提现记录</text>
      </view>
      <!-- 记录项目 -->
      <view class="history-item" v-for="(item,key) in withdrawal">
        <view class="divider"></view>
        <view class="item-info">
          <text class="item-title">商家提现申请</text>
          <text class="item-amount">- {{ item.cashWithdrawal }}</text>
        </view>
        <view class="item-details">
          <text class="item-date">提现时间:{{ item.withdrawalTime }}</text>
          <text 
            class="item-status" 
            :class="{
              'status-pending': item.status === 1,
              'status-approved': item.status === 2,
              'status-rejected': item.status === 3
            }"
          >
            {{ item.status === 1 ? '审核中' : item.status === 2 ? '审核通过' : item.status === 3 ? '审核失败' : '' }}
          </text>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import baseUrl from '../../../utils/urlConfig';

const userInfo = uni.getStorageSync('info');
const withdrawal = ref([]);
const balance = ref(0);
const table = ref({
  merchantId:'',
  cashWithdrawal:'',
  backName:'',
  realName:'',
  bankCardNumber:'',
  remark:''
});
function submitd(){
  table.value.merchantId = userInfo.mid;
  uni.request({
    url: baseUrl + '/yyq/withdrawal',
    method: 'POST', // 根据实际情况选择 GET 或 POST 方法
    data: table.value,
    header: {
      Authorization: uni.getStorageSync('token')
    },
    success: res => {
      console.log('获取成功', res.data.data);
      uni.showToast({
        title: '提交成功',
        icon: 'success',
        duration: 2000
      });
      uni.navigateTo({
  	    url:'/pages/index/shouzhimingxi/shouzhimingxi'
      })
    },
  })
}
onMounted(() => {
    uni.request({
      url: baseUrl + '/yyq/withdrawal/listByMid/' + userInfo.mid,
      header: {
        Authorization: uni.getStorageSync('token')
      },
      success: res => {
        console.log('获取成功', res.data.data);
        withdrawal.value = res.data.data; // 将获取到的数据赋值给 withdrawal 数组
      },
    })
    uni.request({
      url: baseUrl + '/yyq/balance/listByMid/' + userInfo.mid,
      header: {
        Authorization: uni.getStorageSync('token')
      },
      success: res => {
        balance.value = res.data.data[0].initialBalance;
      },
    })
})
</script>

<style>
.withdrawal-page {
  background-color: #f5f5f5;
  min-height: 100vh;
}

/* 头部样式 */
.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 44px;
  background-color: #1e90ff;
  color: white;
  padding: 0 15px;
  position: relative;
}

.title {
  font-size: 18px;
  font-weight: 500;
}

.menu-icons {
  display: flex;
  align-items: center;
}

.dots {
  font-size: 20px;
  margin-right: 10px;
}

.circle {
  font-size: 22px;
}

/* 卡片样式 */
.card {
  background-color: white;
  border-radius: 10px;
  margin: 15px;
  padding: 15px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}

.balance-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.balance-label {
  font-size: 16px;
  color: #333;
}

.balance-amount {
  font-size: 18px;
  color: #ff4500;
  font-weight: 500;
}

/* 表单样式 */
.form-group {
  margin-bottom: 15px;
  position: relative;
}

.form-label {
  display: block;
  margin-bottom: 8px;
  font-size: 14px;
  color: #333;
}

.form-input, .dropdown-input {
  width: 100%;
  height: 40px;
  border: 1px solid #e0e0e0;
  border-radius: 20px;
  padding: 0 15px;
  box-sizing: border-box;
  font-size: 14px;
}

.currency-unit {
  position: absolute;
  right: 15px;
  top: 38px;
  color: #666;
}

.dropdown-input {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.placeholder {
  color: #999;
}

.dropdown-icon {
  color: #999;
}

.disclaimer {
  margin: 15px 0;
  font-size: 12px;
  color: #999;
  text-align: center;
  line-height: 1.5;
}

.submit-btn {
  background-color: #1e90ff;
  height: 45px;
  border-radius: 22.5px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 16px;
  font-weight: 500;
  margin-top: 20px;
}

/* 提现记录样式 */
.history-section {
  background-color: white;
  margin: 15px;
  border-radius: 10px;
  padding: 15px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}

.history-title {
  font-size: 16px;
  color: #333;
  font-weight: 500;
  margin-bottom: 15px;
}

.history-item {
  padding: 10px 0;
}

.item-info {
  display: flex;
  justify-content: space-between;
  margin-bottom: 5px;
}

.item-title {
  font-size: 14px;
  color: #333;
}

.item-amount {
  font-size: 14px;
  color: #ff4500;
}

.item-details {
  display: flex;
  justify-content: space-between;
}

.item-date {
  font-size: 12px;
  color: #999;
}

.item-status {
  font-size: 12px;
}

.status-pending {
  color: #999;
}

.status-approved {
  color: #52c41a;
}

.status-rejected {
  color: #ff4d4f;
}

.divider {
  height: 1px;
  background-color: #f0f0f0;
  margin: 10px 0;
}

.back-btn{ margin-left: 20rpx; width: 50rpx; height: 50rpx; position: relative;}	
.back-icon { width: 30px; height: 30px;}	
.back-icon::before { content: ""; position: absolute; width: 20px; height: 2px; background-color: #fff; top: 15rpx; left: 47rpx; transform: translate(-50%, -50%); }
.back-icon::after { content: ""; position: absolute; width: 10px; height: 10px; border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(45deg); top: 5rpx; left: 30rpx;}	       
</style>
